import { BetaSchemaForm } from '@ant-design/pro-form'
import { ProList } from '@ant-design/pro-list'
import { Button, Empty, Form } from 'antd'
import { useEffect, useState } from 'react'
import { useAxiosWebGet, useAxiosWebPost, useCtx } from '@sker/sdk'
import { renderAdminPage, useServerData } from '@sker/ui'
import { PageContainer } from '@ant-design/pro-layout'
export const PluginPage: React.FC<{}> = ({ }) => {
    const [serverData] = useServerData()
    const { me } = useCtx();
    useEffect(() => {
        me()
    }, [])
    const [current, setCurrent] = useState<string>(`@sker/orm`)
    return <PageContainer title={serverData?.title || '插件管理'}>
        <div className='flex'>
            <ProList
                className='w-400px'
                request={async () => {
                    return {
                        data: [{
                            id: '@sker/orm',
                            title: '数据库'
                        }, {
                            id: '@sker/redis',
                            title: '缓存'
                        }, {
                            id: '@sker/email',
                            title: '邮箱'
                        }, {
                            id: '@sker/s3',
                            title: 'S3上传'
                        }, {
                            id: '@sker/sms',
                            title: '短信'
                        }, {
                            id: '@sker/wx_tpl',
                            title: '微信模板消息'
                        }, {
                            id: '@sker/payment',
                            title: '在线支付'
                        }, {
                            id: '@sker/qiniu',
                            title: '七牛云'
                        }],
                        total: 3
                    }
                }}
                metas={{
                    title: { dataIndex: 'title' },
                    actions: {
                        render: (text, record: any, index, action) => {
                            return <Button type='link' size={'small'} onClick={() => {
                                console.log({ id: record })
                                setCurrent(record.id)
                            }}>设置</Button>
                        }
                    }
                }}
            />
            <div className="flex-1 ml-24px bg-white rounded-8px px-24px py-24px">
                {current === '@sker/orm' && <OrmSetting />}
                {current === '@sker/redis' && <RedisSetting />}
                {current === '@sker/email' && <EmptySetting />}
                {current === '@sker/s3' && <S3Setting />}
                {current === '@sker/sms' && <EmptySetting />}
                {current === '@sker/wx_tpl' && <EmptySetting />}
                {current === '@sker/payment' && <EmptySetting />}
                {current === '@sker/qiniu' && <EmptySetting />}
            </div>
        </div>
    </PageContainer>
}

renderAdminPage(PluginPage, 'imeepos/core/web/plugin')
const S3Setting: React.FC<{}> = ({ }) => {
    const { data, fetch: getSetting } = useAxiosWebGet('imeepos/core/plugin/setting')
    const { fetch: saveSetting } = useAxiosWebPost('imeepos/core/plugin/setting')

    const [form] = Form.useForm()
    useEffect(() => {
        getSetting({
            name: '@sker/s3'
        })
    }, [])
    useEffect(() => {
        form.setFieldsValue(data)
    }, [data])
    return <div>
        <BetaSchemaForm onFinish={async (values) => {
            await saveSetting({
                name: '@sker/s3',
                data: values
            })
        }} form={form} columns={[{
            title: 'apiVersion',
            dataIndex: 'apiVersion',
            tooltip: '2006-03-01'
        }, {
            title: 'region',
            dataIndex: 'region',
            tooltip: 'cn-north-1'
        }, {
            title: 'endpoint',
            dataIndex: 'endpoint',
        }, {
            title: 'accessKeyId',
            dataIndex: 'accessKeyId'
        }, {
            title: 'secretAccessKey',
            dataIndex: 'secretAccessKey'
        }, {
            title: '私有空间',
            dataIndex: 'privateBucket'
        }, {
            title: '公共空间',
            dataIndex: 'publicBucket'
        }]} />
    </div>
}
export const EmptySetting: React.FC<{}> = ({ }) => {
    return <Empty description="开发中。。。敬请期待"></Empty>
}

const RedisSetting: React.FC<{}> = ({ }) => {
    const { data, fetch: getSetting } = useAxiosWebGet('imeepos/core/plugin/setting')
    const { fetch: saveSetting } = useAxiosWebPost('imeepos/core/plugin/setting')

    const [form] = Form.useForm()
    useEffect(() => {
        getSetting({
            name: '@sker/redis'
        })
    }, [])
    useEffect(() => {
        form.setFieldsValue(data)
    }, [data])
    return <div>
        <BetaSchemaForm onFinish={async (values) => {
            await saveSetting({
                name: '@sker/redis',
                data: values
            })
        }} form={form} columns={[{
            title: 'Redis地址',
            dataIndex: 'url'
        }]} />
    </div>
}

const OrmSetting: React.FC<{}> = ({ }) => {
    const { data, fetch: getSetting } = useAxiosWebGet('imeepos/core/plugin/setting')
    const { fetch: saveSetting } = useAxiosWebPost('imeepos/core/plugin/setting')

    const [form] = Form.useForm()
    useEffect(() => {
        getSetting({
            name: '@sker/orm'
        })
    }, [])
    useEffect(() => {
        form.setFieldsValue(data)
    }, [data])
    return <div>
        <BetaSchemaForm onFinish={async (values) => {
            await saveSetting({
                name: '@sker/orm',
                data: values
            })
        }} form={form} columns={[{
            title: '类型',
            dataIndex: 'type',
            valueEnum: {
                postgres: 'postgres'
            }
        }, {
            title: '地址',
            dataIndex: 'url'
        }]} />
    </div>
}
